<template>
	<div class="plan-item-list padding-20 row-option" :class="{'plan-item-list--active':itemList.checked}" @click="selectChange">
		<div class="plan-item-left">
			<div class="plan-item-text">
				<ai-cell title="客群名称" :value="itemList.clusterName" />
			</div>
			<div class="plan-item-title plan-flex margin-t-20">
				<ai-cell title="潜客总量：" :value="itemList.potentialCustomerCount" />
			</div>
			<div class="plan-item-text margin-t-30">
				<ai-cell
					title="策划关键词："
					:value="itemList.clusterCharacteristics"
				/>
			</div>
			<div class="plan-item-text plan-flex margin-t-40">
				<ai-cell title="客群活跃期间" :value="itemList.activeWindow" />
			</div>
		</div>
		<div class="plan-item-right">
			<div class="plan-item-top plan-flex">
				<div class="plan-item-star-view plan-flex" :class="{'plan-item-star-view--active':itemList.clusterType == 1}">
					<div class="plan-item-star"><star-filled /></div>
					<div class="plan-item-star"><star-filled /></div>
					<div class="plan-item-star"><star-filled /></div>
					<div class="plan-item-star"><star-filled /></div>
					<div class="plan-item-star"><star-filled /></div>
				</div>
				<el-button class="plan-item-content margin-l-20" disabled type="primary" :class="{'is-disabled':false,'is-plain':itemList.checked == false}" size="small">{{getClusterProcessingValue(itemList.processingStatus)}}</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue";
import aiCell from '/@/components/aiCell.vue'
import {StarFilled} from '@element-plus/icons-vue'
let props = defineProps({
	itemList: {
		type: Object,
		default:  ()=>{
			return {};
		},
	},
})
let cluster_processing_status=[
	{key:0,value:"未处理"},
	{key:1,value:"处理中"},
	{key:2,value:"已处理"},
]
let { itemList } = toRefs(props);
const getClusterProcessingValue=(key:number)=>{
	let item=cluster_processing_status.find((map)=>{return map.key == key});
    return item?.value || '';
}
let emits = defineEmits(['selectionChange'])
const selectChange=()=>{
	itemList.value.checked=!itemList.value.checked;
	emits("selectionChange",itemList.value);
}
</script>

<style scoped lang="scss">
.plan-item-select {
	width: 75px;
	margin: 0 auto;
	.el-button + .el-button {
		margin-left: 0;
		margin-top: 10px;
	}
}
.plan-item-list {
	width: 100%;
	height: 100%;
	border: solid 1px #ccc;
	box-shadow: 1px 1px 1px #ccc;
	border-radius: 8px;
	align-items: stretch;
	.margin-t-30 {
		margin-top: 30px;
	}
	.margin-t-40{
		margin-top: 40px;
	}
	.plan-item-select-content {
		width: 100%;
		margin-left: 0;
	}
	.margin-t-15 {
		margin-top: 15px;
	}
	.plan-flex {
		display: flex;
		align-items: center;
	}
	.plan-item-flex-between {
		justify-content: space-between;
	}
	.ai-cell {
		margin-left: 20px;
		&:first-child {
			margin-left: 0;
		}
	}
	.plan-item-text {
		font-size: 14px;
		line-height: 16px;
		color: #666666;
	}
	.plan-item-title {
		font-size: 30px;
		line-height: 32px;
		color: #333333;
		font-weight: 700;
	}
	&--active{
		background: var(--el-color-primary);
		.plan-item-text {
			color: #fff;
		}
		.plan-item-title {
			color: #fff;
		}
	}
	.plan-item-left {
		width: 320px;
	}
	.plan-item-top {
		justify-content: right;
		.plan-item-star-view{
			&--active{
				color: yellow;
			}
		}
		.plan-item-star {
			width: 14px;
			height: 16px;
			line-height: 16px;
			font-size: 14px;
		}
		.plan-item-star + .plan-item-star {
			margin-left: 5px;
		}
	}
	.plan-item-right {
		width: calc(100% - 320px);
		margin-left: 10px;
	}
}
.plan-item-list + .plan-item-list{
	margin-top: 50px;
}
</style>
